<div class="realtime-overview-container">
  <div class="left-panel">
    <div class="left-panel-top">
      <div class="l-wrap">
       <div class="content">
         <div>引水指标（亿m³）</div>
         <div><strong>73.27</strong></div>
         <div>累计引水（亿m³）</div>
         <div><strong>15.04</strong></div>
       </div>
      </div>
      <div class="r-wrap">
        <div class="content">
          <div>耗水指标（亿m³）</div>
          <div><strong>41.49</strong></div>
          <div>累计耗水（亿m³）</div>
          <div><strong>{{ljhs}}</strong></div>
        </div>
      </div>
    </div>

    <div class="left-panel-center">
      <div class="card">
        <div class="card-title">
          各业用水
        </div>
        <div echarts [options]="basePieChartOption" [merge]="pieChartOpt1" class="chart"
             style="height: 200px;"></div>
      </div>

      <div class="card">
        <div class="card-title">
          取水水源分布
        </div>
        <div echarts [options]="basePieChartOption" [merge]="pieChartOpt2" class="chart"
             style="height: 200px;"></div>
      </div>

      <div class="card" style="height: calc(100vh - 730px);">
        <nz-table
          #qssyTable
          nzBordered
          [nzShowPagination]="false"
          nzSize="middle"
          [nzData]="qssyTableData">
          <thead>
          <tr>
            <th>取水水源</th>
            <th>水资源量</th>
            <th>取水量</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of qssyTable.data">
            <td>{{ data.name }}</td>
            <td>{{ data.totalVal }}</td>
            <td>{{ data.useVal }}</td>
          </tr>
          </tbody>
        </nz-table>
      </div>

    </div>


  </div>
  <div class="center-panel">
    <div echarts [options]="mapChartOption" style="height: calc(100vh - 90px)" (chartClick)="chartClick($event)"></div>
  </div>
  <div class="right-panel">
    <div class="card">
      <div class="title-wrap">
        <div class="text">农业用水&生态用水</div>
        <div class="button">进入</div>
      </div>
      <div class="chart-wrap">
        <div echarts [options]="baseBarChartOption" [merge]="barChartOpt1"
             style="height: 240px;"></div>
      </div>
    </div>

    <div class="card">
      <div class="title-wrap">
        <div class="text">工业用水</div>
        <div class="button">进入</div>
      </div>

      <div class="table-wrap">
        <nz-table
          #gyysTable
          nzBordered
          nzSize="small"
          [nzPageSize]="6"
          [nzData]="gyysTableData">
          <thead>
          <tr>
            <th>单位</th>
            <th>取水量</th>
            <th>计划</th>
            <th>超计划</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of gyysTable.data">
            <td>{{ data.name }}</td>
            <td>{{ data.useVal }}</td>
            <td>{{ data.limitVal }}</td>
            <td>{{ data.per }}</td>
          </tr>
          </tbody>
        </nz-table>
      </div>
    </div>

    <div class="card">
      <div class="title-wrap">
        <div class="text">生活用水</div>
        <div class="button">进入</div>
      </div>
      <div class="chart-wrap" style="height: calc(100vh - 770px);;overflow-y: scroll">
        <div echarts [options]="baseBarChartOption2"
             style="height: 600px;"></div>
      </div>
    </div>
  </div>
</div>
